<template>
  <div class="model-container">
    <div class="listName">钓场列表</div>
    <!--搜索-->
    <el-card shadow="never">
      <div slot="header" class="clearfix">
        <span>快捷搜索</span>
        <div class="btns-wrapper-right">
          <el-button v-if="!searchShow" icon="el-icon-arrow-down" @click="searchShow = true"/>
          <el-button v-else icon="el-icon-arrow-up" @click="searchShow = false"/>
        </div>
      </div>
      <el-collapse-transition>
        <div v-show="searchShow" class="cardbody">
          <el-form ref="seacherParam" :model="seacherParam">
            <el-row :gutter="10">
              <el-col :xl="5" :lg="6" :md="6" :sm="8" >
                <el-col :xl="7" :lg="7" :md="8" :sm="8" class="input-name">类型</el-col>
                <el-col :xl="17" :lg="17" :md="16" :sm="16">
                  <el-form-item prop="newsType">
                    <el-select v-model="seacherParam.newsType" placeholder="请选择类型" size="small">
                      <el-option label="文字" value="0"/>
                      <el-option label="图文" value="1"/>
                      <el-option label="视频" value="2"/>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-col>
            </el-row>
            <div class="cardfooter">
              <el-button type="primary" size="mini" plain @click="seachFun">查询</el-button>
              <el-button type="warning" size="mini" plain @click="resetFun">重置</el-button>
            </div>
          </el-form>
        </div>
      </el-collapse-transition>
    </el-card>
    <!--表格-->
    <el-card style="margin-top: 10px">
      <div v-if="getUser().sellerId !== null" slot="header" class="clearfix">
        <div class="btns-wrapper-left">
          <el-button type="primary" plain @click="add">新增</el-button>
        </div>
      </div>
      <div class="table-wrapper">
        <el-table v-loading="!dataOption" :stripe="true" :data="dataOption" border empty-text="暂无数据">

          <el-table-column align="center" prop="fishName" label="名称"/>

          <el-table-column align="center" prop="sellerName" label="所属服务处"/>

          <el-table-column align="center" label="版主">
            <template slot-scope="scope">{{ scope.row.fishGroundMemberRel.length <= 0?'店家':memberFun(scope.row.fishGroundMemberRel) }}</template>
          </el-table-column>

          <el-table-column align="center" label="头像">
            <template slot-scope="scope"><img :src="scope.row.fishPic" width="50px" height="50px"></template>
          </el-table-column>

          <!--<el-table-column align="center" prop="newsContent" label="内容" show-overflow-tooltip/>-->

          <!--<el-table-column align="center" label="类型">-->
          <!--<template slot-scope="scope">{{ newsTypeVal(scope.row.newsType) }}</template>-->
          <!--</el-table-column>-->

          <el-table-column align="center" prop="createTime" label="创建时间"/>

          <!--<el-table-column align="center" prop="sellerName" label="所属服务处"/>-->

          <!--<el-table-column align="center" label="评论管理">-->
          <!--<template slot-scope="scope">-->
          <!--<el-button title="查看" type="primary" circle class="table-icon " @click="check(scope.row)"><i class="iconfont icon-chakan2"/></el-button>-->
          <!--</template>-->
          <!--</el-table-column>-->

          <!--<el-table-column align="center" label="操作" width="200px">-->
          <!--<template slot-scope="scope">-->

          <!--<el-button title="编辑" type="primary" circle icon="el-icon-edit" class="table-icon" @click="edit(scope.row)"/>-->

          <!--<el-button title="删除" type="warning" circle icon="el-icon-delete" class="table-icon" @click="del(scope.row)"/>-->

          <!--</template>-->
          <!--</el-table-column>-->

        </el-table>

        <!--分页-->
        <el-pagination
          :current-page="pageNo"
          :page-sizes="[10, 20, 30]"
          :page-size="pageSize"
          :total="rowCount"
          background
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
      </div>
    </el-card>

    <!--弹框-->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogState"
      :close-on-click-modal="false"
      :before-close="handleClose"
      top="5vh"
      width="50%">
      <el-form ref="dialogBindData" :model="dialogBindData" :rules="rules" label-width="30%" status-icon class="demo-ruleForm">
        <div class="formBody">
          <el-form-item label="钓场名称" prop="newsTitle" class="three">
            <el-input v-model="dialogBindData.newsTitle" autosize type="text" size="small" placeholder="请输入名称"/>
          </el-form-item>
          <el-form-item label="钓场头像" prop="picUrl" class="three">
            <div class="uploadImg">
              <img :src="picUrl">
              <div class="uploadImg_mock" @click="imagecropperShow=true"><i class="iconfont icon-xiugai"/></div>
            </div>
            <image-cropper
              v-show="imagecropperShow"
              :key="imagecropperKey"
              :url="actionUrl"
              @close="close"
              @crop-upload-success="cropSuccess"/>
          </el-form-item>
          <el-form-item label="钓场类型" prop="newsType">
            <el-radio-group v-model="dialogBindData.newsType" @change="newsTypeFun">
              <el-radio :label="0">文字</el-radio>
              <el-radio :label="1">图片</el-radio>
              <el-radio :label="2">视频</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="钓场内容" prop="newsContent" class="three">
            <el-input v-model="dialogBindData.newsContent" autosize type="textarea" placeholder="请输入内容"/>
          </el-form-item>
          <el-form-item v-if="dialogBindData.newsType === 1" label="钓场图文" class="three">
            <noticeimg v-if="isRouterAlive" :editor-data="dialogBindData" :type="dialogType" @emitSuccess="emitSuccessImg"/>
          </el-form-item>
          <el-form-item v-if="dialogBindData.newsType === 2" label="钓场视频" class="three">
            <noticevideoone v-if="isRouterAlive" ref="noticevideoone" :editor-data="dialogBindData" :type="dialogType" @emitSuccess="emitSuccessVideo1"/>
          </el-form-item>
        </div>
        <div class="btns-wrapper">
          <el-button size="small" @click="handleClose">取 消</el-button>
          <el-button :loading="buttonState" type="primary" size="small" @click="submmitFun">保 存</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import * as fishing from '../../api/fishing'
import noticeimg from '../../views/fishing/component/noticeimg'
import noticevideoone from '../../views/fishing/component/noticevideo1'
import ImageCropper from '@/components/ImageCropper'
import { getUserInformation } from '@/utils/auth'
export default {
  components: { noticeimg, noticevideoone, ImageCropper },
  data() {
    return {
      isRouterAlive: true,
      // 页面搜索
      seacherParam: {
        newsType: ''
      },
      searchShow: false,
      pageNo: 1,
      pageSize: 10,
      rowCount: null, // 总条数
      // 弹框
      dialogType: 1, // 1--增加  2--编辑  3--查看
      dialogState: false,
      // 按钮状态
      buttonState: false,
      // 列表数据
      dataOption: null,
      // 提交内容
      dialogBindData: {
        id: '',
        newsTitle: '',
        newsContent: '',
        newsType: 0,
        otherUrl: '',
        fristFrameUrl: ''

      },
      rules: {
        newsTitle: [
          { required: true, message: '请输入名称', trigger: 'blur' }
        ],
        newsContent: [
          { required: true, message: '请输入内容', trigger: 'blur' }
        ]
      },
      // 上传头像
      actionUrl: '',
      imagecropperShow: false,
      imagecropperKey: 0,
      picUrl: './static/images/uploadPic.png'
    }
  },
  computed: {
    dialogTitle() {
      if (this.dialogType === 1) {
        return '新增钓场'
      }
      if (this.dialogType === 2) {
        return '编辑钓场'
      } else {
        return '查看'
      }
    }
  },
  beforeMount() {
    this.getList()
    this.initUploadFileurl()
  },
  methods: {
    // 获取用户信息
    getUser() {
      return JSON.parse(getUserInformation())
    },
    initUploadFileurl() {
      this.actionUrl = process.env.BASE_API + 'file/uploadImageAndCrtThumbImagesRichEdit'
    },
    seachFun() {

    },
    getList() {
      const param = {
        current: this.pageNo,
        size: this.pageSize
      }
      if (this.getUser().sellerId) {
        param.sellerId = this.getUser().sellerId
      }
      fishing.getFishingList(param).then(res => {
        if (res.data.code !== 1) {
          this.$message.error(res.data.msg)
          return false
        }
        if (res.data.data === 'null' || res.data.data === null) {
          return false
        }
        // 初始话表格数据
        this.dataOption = res.data.data.records
        // 初始化分页数据
        this.rowCount = res.data.data.total
        this.pageSize = res.data.data.size
      })
    },
    // 新增
    add() {
      this.dialogType = 1
      this.dialogState = true
      this.isRouterAlive = true
    },
    // 编辑
    edit(data) {
      this.dialogType = 2
      this.dialogState = true
      this.isRouterAlive = true
      this.dialogBindData.id = data.id
      this.reBindData(data)
    },
    check(data) {
      this.$router.push({
        name: '/v1/fishone',
        params: {
          id: data.id
        }
      })
    },
    // 提交
    submmitFun() {
      if (this.dialogBindData.newsType === 2) {
        this.$refs.noticevideoone.incrementTotal()
      }
      const param = {
        newsContent: this.dialogBindData.newsContent,
        newsType: this.dialogBindData.newsType,
        newsTitle: this.dialogBindData.newsTitle
      }
      if (this.dialogType !== 1) {
        param.id = this.dialogBindData.id
      }
      this.$refs.dialogBindData.validate((valid) => {
        if (valid) {
          if (this.picUrl === './static/images/uploadPic.png') {
            this.$message({
              message: '最上传头像',
              type: 'warning'
            })
            return false
          }
          param.avatar = this.picUrl
          if (this.dialogBindData.newsType === 1) {
            if (!this.dialogBindData.otherUrl) {
              this.$message({
                message: '最少上传一张图片',
                type: 'warning'
              })
              return false
            }

            if (this.dialogBindData.otherUrl.length <= 0) {
              this.$message({
                message: '最少上传一张图片',
                type: 'warning'
              })
              return false
            }
            if (typeof (this.dialogBindData.otherUrl) === 'string') {
              param.otherUrl = this.dialogBindData.otherUrl
            } else {
              const arr = []
              for (const val of this.dialogBindData.otherUrl) {
                arr.push(val.url)
              }
              param.otherUrl = arr.join(',')
            }
          } else if (this.dialogBindData.newsType === 2) {
            if (!this.dialogBindData.otherUrl) {
              this.$message({
                message: '请上传视频',
                type: 'warning'
              })
              return false
            }
            param.otherUrl = this.dialogBindData.otherUrl
            param.fristFrameUrl = this.dialogBindData.fristFrameUrl
          }
          if (this.dialogType === 1) {
            fishing.addFishingList(param).then(res => {
              if (res.data.code !== 1) {
                this.$message({
                  message: res.data.msg,
                  type: 'warning'
                })
                this.buttonState = false
                return false
              }
              this.$message({
                message: '添加成功',
                type: 'success'
              })
              this.buttonState = false
              this.getList()
              this.handleClose()
            })
          } else {
            fishing.editorFishingList(param).then(res => {
              if (res.data.code !== 1) {
                this.$message({
                  message: res.data.msg,
                  type: 'warning'
                })
                this.buttonState = false
                return false
              }
              this.$message({
                message: '编辑成功',
                type: 'success'
              })
              this.buttonState = false
              this.getList()
              this.handleClose()
            })
          }
        } else {
          return false
        }
      })
    },
    // 删除
    del(data) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        fishing.delFishingList(data.id).then(res => {
          if (res.data.code === 1) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getList()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    newsTypeFun() {
      this.dialogBindData.otherUrl = ''
      this.dialogBindData.fristFrameUrl = ''
    },
    emitSuccessImg(data) {
      this.dialogBindData.otherUrl = data
    },
    emitSuccessVideo1(data) {
      if (JSON.stringify(data) !== '{}') {
        this.dialogBindData.otherUrl = data.otherUrl
        this.dialogBindData.fristFrameUrl = data.fristFrameUrl
      } else {
        this.dialogBindData.otherUrl = ''
        this.dialogBindData.fristFrameUrl = ''
      }
    },
    // 上传头像
    cropSuccess(resData) {
      this.imagecropperShow = false
      this.imagecropperKey = this.imagecropperKey + 1
      this.picUrl = resData.data[0].maxImageUrl
    },
    close() {
      this.imagecropperShow = false
    },
    // 反显
    reBindData(data) {
      this.picUrl = data.avatar
      for (const key in this.dialogBindData) {
        this.dialogBindData[key] = data[key]
      }
    },
    // 重置
    resetFun() {
      this.$refs.seacherParam.resetFields()
      this.pageNo = 1
      this.pageSize = 10
      this.getList()
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.pageNo = val
      this.getList()
    },
    handleClose() {
      for (const key in this.dialogBindData) {
        if (key === 'newsType') {
          this.dialogBindData[key] = 0
        } else {
          this.dialogBindData[key] = ''
        }
      }
      this.dialogState = false
      this.isRouterAlive = true
      this.$refs.dialogBindData.clearValidate()
    },
    newsTypeVal(data) {
      if (data === 0) {
        return '文字'
      } else if (data === 1) {
        return '图文'
      } else if (data === 2) {
        return '视频'
      }
    },
    memberFun(data) {
      const arr = []
      for (const val of data) {
        arr.push(val.nickName)
      }
      return arr.join(',')
    }
  }
}
</script>
<style type="text/scss" lang="scss" scoped>
  .uploadImg{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    /*border: 1px dashed #dcdfe6;*/
    img{
      display: block;
      border-radius: 50%;
      width: 100%;
      height: 100%;
    }
    .uploadImg_mock{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: rgba(0,0,0,0);
      transition:background-color 0.35s;
      -webkit-transition: background-color 0.35s;
      i{
        position: absolute;
        top: 50%;
        left: 50%;
        color: #fff;
        font-size: 26px;
        margin-left: -12px;
        margin-top: -16px;
        opacity: 0;
        transition:opacity 0.35s;
        -webkit-transition: opacity 0.35s;
      }
    }
    &:hover .uploadImg_mock{
      background-color: rgba(0,0,0,0.5);
      i{
        opacity: 1;
      }
    }
  }

</style>
